import { LJIcon } from "@/public/icon"
import { Button } from "@nextui-org/react"

function PriceItem({ item }){
    return (
        <div className="price_item dark:bg-default relative background-100 rounded-[13px] px-[13px] py-[22px] w-[336px] h-[666px] mr-[37.8px]">
            <div className="price_recommend absolute top-0 left-[50%] translate-x-[-50%] min-w-max h-[35px] box-border bg-[#1EAAE5] text-[#ffffff] flex items-start justify-center px-[19px] py-[5px] rounded-b-[10px]">
                <LJIcon.Like width={20} height={20}></LJIcon.Like>
                <span className="text-[14px] font-bold leading-[25px] ml-1">强烈推荐</span>
            </div>
            <header className="price_header flex">
                <div className="price_number text-[14px]">
                    <span className="text-[32px] font-normal">{item.number} </span>/ {item.unit}
                </div>
                <div className="price_center flex flex-col flex-1 min-w-max">
                    <div className="price_day_num flex-1 items-end justify-center flex">
                        ￥{item.day_num}元 / 天
                    </div>
                </div>
                <div className="diamond flex-1 flex justify-end">
                    <LJIcon.Diamond width={30} height={30}></LJIcon.Diamond>
                </div>
            </header>
            <div className="price_body mt-[23px]">
                <div className="price_tips text-[12px] mb-1.5">
                    说明：{item.placeholder}
                </div>
                <div className="other_tips text-[12px] ">
                    {item.otherTips}
                </div>
                <div className="price_business mt-[22px]">
                    <div className="price_business_title text-[18px] font-bold mb-[22px]">
                        核心业务
                    </div>
                    <div className="price_business_list">
                        {
                            item.business.map((bus,bs)=>{
                                return <div className="price_business_item px-2 py-1 flex" key={bs}>
                                    <LJIcon.Success width={16} height={16}>    
                                    </LJIcon.Success> 
                                    <span className="ml-2 text-[14px]">{bus.title}</span>
                                </div>
                            })
                        }
                    </div>
                </div>
            </div>
            <footer className="price_footer mt-6">
                <div className="button-group flex justify-center items-center">
                    <Button color="primary" radius="full" className="text-[16px] font-bold px-6 py-2">立刻开通</Button>
                </div>
            </footer>
        </div>
    )
}
export default function Price({ list=[] }){
    return <div className="Price_content_container flex justify-center mt-[40px]">
        {
            list.map((item,index)=>{
                return <PriceItem key={index} item={item}></PriceItem>
            })
        }
    </div>
}